<template>
  <div>
    <h1>收款计划管理</h1>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-form-item label="小区名称">
          <el-input v-model="formInline.premiseName" placeholder="小区名称" clearable />
        </el-form-item>
        <el-form-item label="租客姓名">
          <el-input v-model="formInline.tenantName" placeholder="租客姓名" clearable />
        </el-form-item>
        <el-form-item label="收款单号">
          <el-input v-model="formInline.receiptOrderNo" placeholder="收款单号" clearable />
        </el-form-item>
      </el-form-item>
      <el-form-item label="收款状态">
        <el-select v-model="formInline.skStatus" placeholder="收款状态" clearable>
          <el-option label="未收款" value="1">未收款</el-option>
          <el-option label="已收款" value="2">已收款</el-option>
          <el-option label="已终止" value="3">已终止</el-option>
          <el-option label="已冻结" value="4">已冻结</el-option>
        </el-select>
        <el-form-item label="账单类型">
          <el-select v-model="formInline.billType" placeholder="账单类型" clearable>
            <el-option label="未收款" value="1">分期变更</el-option>
            <el-option label="已收款" value="2">租约保理变更</el-option>
            <el-option label="已终止" value="3">退租变更</el-option>
            <el-option label="已冻结" value="4">普通账单</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="租房合同编号">
          <el-input v-model="formInline.contractNo" placeholder="租房合同编号" clearable />
        </el-form-item>
      </el-form-item>
      <el-form-item label="应收日期">
        <el-date-picker
          v-model="formInline.ysrq"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="实收日期">
        <el-date-picker
          v-model="formInline.ssrq"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeName" type="card" align="center" @tab-click="handleClick">
      <el-tab-pane label="房租收款计划" name="1">
        <el-row :gutter="24">
          <el-col :span="4"><h3>应收金额总计(元):<font color="red">{{input}}</font></h3></el-col>
          <el-col :span="4"><h3>实收金额总计(元):<font color="red">{{input2}}</font></h3></el-col>
        </el-row>
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="contractNo"
            label="租房合同号"
          />
          <el-table-column
            prop="receiptOrderNo"
            label="收款单号"
          />
          <el-table-column
            prop="roomName"
            label="承租房间"
          />
          <el-table-column
            prop="tenantName"
            label="租客姓名"
          />
          <el-table-column
            prop="premiseName"
            label="小区名称"
          />
          <el-table-column
            prop="paymentAmount"
            label="支付金额"
          />
          <el-table-column
            prop="receiptNumber"
            label="账单"
          >
            <template v-slot="scope">
              第{{ scope.row.receiptNumber }}期
            </template>
          </el-table-column>
          <el-table-column
            prop="skStatus"
            label="收款状态"
          >
            <template v-slot="scope">
              <span v-if="scope.row.skStatus==1">未收款</span>
              <span v-if="scope.row.billType==2">已收款</span>
              <span v-if="scope.row.billType==3">已中止</span>
              <span v-if="scope.row.billType==4">已冻结</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="billType"
            label="账单类型"
          >
            <template v-slot="scope">
              <span v-if="scope.row.billType==1">分期变更</span>
              <span v-if="scope.row.billType==2">租约保理变更</span>
              <span v-if="scope.row.billType==3">退租变更</span>
              <span v-if="scope.row.billType==4">普通账单</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="collectionDate"
            label="应收日期"
          />
          <el-table-column
            prop="realCollectionDate"
            label="实收日期"
          />
          <el-table-column
            prop="payMethod"
            label="支付方式"
          >
            <template v-slot="scope">
              <span v-if="scope.row.payMethod==1">快捷同</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="operationUser"
            label="操作人"
          />
        </el-table>
        <el-pagination
          :current-page="formInline.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="formInline.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="租务收款计划" name="2">

        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="contractNo"
            label="租房合同号"
          />
          <el-table-column
            prop="receiptOrderNo"
            label="收款单号"
          />
          <el-table-column
            prop="roomName"
            label="承租房间"
          />
          <el-table-column
            prop="tenantName"
            label="租客姓名"
          />
          <el-table-column
            prop="premiseName"
            label="小区名称"
          />
          <el-table-column
            prop="paymentAmount"
            label="支付金额"
          />
          <el-table-column
            prop="receiptNumber"
            label="账单第几期"
          />
          <el-table-column
            prop="skStatus"
            label="收款状态"
          />
          <el-table-column
            prop="billType"
            label="账单类型"
          />
          <el-table-column
            prop="collectionDate"
            label="应收日期"
          />
          <el-table-column
            prop="realCollectionDate"
            label="实收日期"
          />
          <el-table-column
            prop="payMethod"
            label="支付方式"
          />
          <el-table-column
            prop="operationUser"
            label="操作人"
          />
        </el-table>
        <el-pagination
          :current-page="formInline.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="formInline.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Skjhgl',
  data() {
    return {
      input: '',
      input2: '',
      activeName: '1',
      formInline: {
        receiptType: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: []
    }
  },
  created() {
    this.handleClick()
  },
  methods: {
    handleClick(tab, event) {
      // alert(this.activeName)
      if (this.activeName == 1) {
        this.formInline.receiptType = this.activeName
        this.getlist()
      } else {
        this.formInline.receiptType = this.activeName
        this.getlist()
      }
    },
    getlist() {
      // alert(JSON.stringify(this.formInline))
      axios.post('http://localhost:8200/jrfwcwgl/TCwReceiptPlanController/list', this.formInline).then((res) => {
        console.log(JSON.stringify(res))
        this.tableData = res.data.obj.list
        this.formInline.pageNum = res.data.obj.pageNum
        this.formInline.pageSize = res.data.obj.pageSize
        this.formInline.total = res.data.obj.total
      })
      this.getyingshou()
      this.getshishou()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formInline.pageSize = val
      this.getlist()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formInline.pageNum = val
      this.getlist()
    },
    onSubmit() {
      this.getlist()
    },
    getyingshou() {
      axios.post('http://localhost:8200/jrfwcwgl/TCwReceiptPlanController/getyingshou',this.formInline).then((resp) => {
        // alert(JSON.stringify(resp.data.obj.yingshou))
        this.input = resp.data.obj.yingshou
      })
    },
    getshishou() {
      axios.post('http://localhost:8200/jrfwcwgl/TCwReceiptPlanController/getshishou',this.formInline).then((resp) => {
        // alert(JSON.stringify(resp.data.obj.shishou))
        this.input2 = resp.data.obj.shishou
      })
    }
  }
}
</script>

<style scoped>

</style>
